<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="终端拜访" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="padding:10px;text-align: right;font-size: 14px;color: dodgerblue;">
      <span @click="hist">历史记录</span>
    </div>
    <nut-cell :title="state.buName" size="large" :label="state.address" is-link @click="chose"  />
    <nut-textarea v-model="state.bfContent" placeholder="输入拜访内容" rows="10" />
    <div style="padding: 10px;">拍照</div>
    <div style="display:flex;">
      <div class="pic" v-for="(pic,index) in state.fileList" :key="index">
        <nut-image :src="pic.url" :width="state.imgwid" :height="state.imgwid"  @click="clickPic"></nut-image>
        <div class="close">
          <CircleClose name="CircleClose" size="40" @click="closePic(index)" />
        </div>
      </div>
    </div>
    <div style="margin-top:30px;">
      <nut-uploader
          capture
          :maximum="1"
          :before-upload="beforeUpload"
          :auto-upload="false"
          ref="uploadRef"

      />
    </div>
    <nut-image-preview :show="state.showPreview" :images="state.fileList" @close="hideFn" />

    <div style="margin-top: 30px;margin-left: 20px;margin-right:20px;">
      <nut-button type="info"  block @click="save">保存</nut-button>
    </div>
  </div>
</template>


<script setup>
import {useGlobal} from "@/stores/useGlobal";
import tool from "@/utils/tool";
import {CircleClose} from "@nutui/icons-vue";
import bus from "@/utils/bus";
import {computed, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
const global = useGlobal()
const router = useRouter()
const uploadRef = ref(null)
const state = ref({
  imgwid: 90,
  showPreview : false,
  uploadUrl: 'appupload/zdbf/',
  bfContent: '',
  buId: '',
  buName: '选择终端',
  address: '',
  quality: 0.5,
  fileList: [],
  fileNames:[],
  imgData: []
})
onMounted(() => {
  bus.$on('choseContact', choseContact)
})
const hei = computed(() => { return window.innerHeight - 165 })
const toolbarHei = computed(() => { return global.statusBarHeight })

const clickLeft = () => {
   router.go(-1)
}
const clickPic = () => {
  if(state.value.fileList.length > 0) {
    for (let i = 0; i < state.value.fileList.length; i++) {
      state.value.imgData.push({src: state.value.fileList[i].url})
    }
    state.value.showPreview = true
  }
}
const hideFn = () => {
  state.value.showPreview = false
}
const hist = () => {
  router.push({name: 'bfjl'})
}
const choseContact = (contact) => {
  state.value.buId = contact.id
  state.value.buName = contact.name
  state.value.address = (contact.linkName?(contact.linkName+','):'') + (contact.address?contact.address:'')
}
const chose = () => {
  router.push({name: 'xzzd'})
}
const save = () => {
  if(!state.value.buId) {
    return tool.err('请选择终端')
  }
  if(state.value.fileNames.length === 0 && !state.value.bfContent) {
    return tool.err('请输入拜访内容或者拍照')
  }
  let form = {
    buId: state.value.buId,
    buName: state.value.buName,
    bfContent: state.value.bfContent,
    pics: state.value.fileNames
  }
  tool.post('app/saveBf', form, true).then(ret => {
    if(ret.stat) {
      state.value.fileList = []
      state.value.fileNames = []
      state.value.buId = ''
      state.value.buName = '选择终端'
      state.value.bfContent = ''
      state.value.address = ''
      clickLeft()
    }
  })
}
const  fileToDataURL = async (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve(e.target.result)
    reader.readAsDataURL(file)
  })
}
const  beforeUpload = async (file) => {
  const base64 = await fileToDataURL(file[0])
  await submitUpload(base64.split(',')[1])
  return []
}
const  submitUpload = async(file) => {
  await tool.upToQiniu64(file, state.value.uploadUrl, async (fileName) => {
    if(fileName) {
      let ret = await tool.getPicUrl(fileName)
      state.value.fileList.push({
        url: ret.urlZoom,
        src: ret.url
      })
      state.value.fileNames.push(fileName)
      clearUpload()
    }
  })
}
const clearUpload = () => {
  uploadRef.value.clearUploadQueue()
}
const closePic = (index) => {
  state.value.fileList.splice(index, 1)
  state.value.fileNames.splice(index, 1)
}


</script>


<style scoped lang="scss">
.pic {
  margin-left: 5px;
  margin-top: 5px;
  border: 1px solid rgba(0,0,0,0.1);
  width: 110px;
  height: 110px;
  padding: 5px;
  border-radius: 4px;
  position: relative;
  .close {
    position:absolute;
    right:1px;top:1px;
  }
}
</style>